<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>jquery.widget.js doc</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script><!-- easing 插件 -->
	<script type="text/javascript" src="../src/jquery.widget.js"></script>
	<style type="text/css">
	*{margin: 0; padding: 0;}
	body{
        font-size:12px;
        padding: 50px;
	}
    h3{
        padding: 10px 0;
        margin: 8px 0;
        border-bottom: 2px solid #ccc;
    }
    .api{
        border: 1px solid #ccc;
        margin-top: 30px;
        padding: 15px;
    }
	</style>
</head>
<body>
	<script type="text/javascript">
	jQuery(function($){
        /* 自动渲染模式 */
		// 初始化 widget
		// 默认匹配 .J_Widget
		$.Widget();
	});
	</script>




<h1>jquery.widget.js demo</h1>



<div>


<h3>效果一</h3>
<style type="text/css">
li{
	list-style:none;
}
.content{
	width:680px;
	border:solid 1px 
}

img{
	border:none;
}

.mall-slide .ks-switchable-nav{
	margin-top:140px;
	width:460px;
	overflow:hidden;
	
}
.mall-slide .ks-switchable-nav li{
	float:left;
	width:130px;
	height:50px;
	overflow:hidden;
	margin-right:15px;
	border:solid 1px #FFFFFF;
	cursor:pointer;
}
.mall-slide .ks-switchable-nav li.ks-active{
	border:solid 1px red;
}
.mall-slide .ks-switchable-nav li img{
	width:150px;
	height:50px;
}
.mall-slide {
    border-bottom: 1px solid #E5E5E5 !important;
    border-left: 1px solid #D8D8D8;
    border-right: 1px solid #D8D8D8;
    border-top: 1px solid #D8D8D8;
    height: 200px;
    position: relative;
    width: 489px;
}
.mall-slide .mall-prev {
    background: url("http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif") no-repeat scroll 0 -109px transparent;
    display: block;
    height: 137px;
    left: 0;
    position: absolute;
    width: 25px;
}
.mall-slide .mall-next {
    background: url("http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif") no-repeat scroll -25px -109px transparent;
    display: block;
    height: 137px;
    position: absolute;
    right: 0;
    width: 25px;
}
.mall-slide .mall-prev:hover {
    background-position: 0 -246px;
}
.mall-slide .mall-next:hover {
    background-position: -25px -246px;
}
.mall-slide .mall-content {
    background: -moz-linear-gradient(center top , #ECECEC, #FFFFFF) repeat scroll 0 0 transparent;
    height: 200px;
    left: 25px;
    overflow: hidden;
    position: absolute;
    width: 439px;
}
.mall-slide li.big-piclist {
    display: block;
    float: left;
    height: 137px;
    overflow: hidden;
    width: 440px;
}
.mall-slide .big-piclist a {
    display: block;
    float: left;
    height: 137px;
    margin-right: 1px;
    overflow: hidden;
    width: 109px;
}
.mall-slide .big-piclist img {
}
.mall-slide .big-piclist a.last {
    margin-right: 0;
    width: 110px;
}
.mall-slide .sm-piclist {
    margin-left: -1px;
    margin-top: 0;
}
.bt-none {
    border-top: 0 none !important;
}
.bl-none {
    border-left: 0 none !important;
}
.mall-slide .sm-piclist a {
    background-color: white;
    border-left: 1px solid #E6E6E6;
    border-top: 1px solid #E6E6E6;
    display: block;
    float: left;
    height: 44px;
    overflow: hidden;
    padding-top: 1px;
    width: 87px;
}
.mall-slide .sm-piclist a.last {
}
.mall-slide .sm-piclist a:hover {
    border-bottom: 2px solid #B81426;
    height: 42px;
}
.tb-slide {
    border: 1px solid #D8D8D8;
}
.tb-slide, .tb-slide li {
    font-size: 0;
    height: 170px;
    overflow: hidden;
    width: 490px;
}
.main-promo .loading-s .tb-slide-list li {
    background: url("http://img02.taobaocdn.com/tps/i2/T16WJqXaXeXXXXXXXX-32-32.gif") no-repeat scroll 50% 50% transparent;
}
.tb-slide-triggers {
    bottom: 5px;
    height: 18px;
    padding-top: 2px;
    position: absolute;
    right: 5px;
    z-index: 10;
}
.tb-slide-triggers li {
    -moz-border-radius: 20px 20px 20px 20px;
    background-color: #FFFFFF;
    color: #DE7D4B;
    cursor: pointer;
    float: left;
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    margin-left: 3px;
    margin-top: -2px;
    opacity: 0.7;
    overflow: visible;
    position: relative;
    text-align: center;
    width: 20px;
}
.tb-slide-triggers li.ks-active {
    background-color: #FF6600;
    color: #FFFFFF;
    filter: none;
    font-weight: bold;
    opacity: 1;
}

	</style>
	<div  id="J_MallSlide" class="mall-slide J_Widget dd" 
data-widget-type="Carousel" 
data-widget-config="{'navCls':'ks-switchable-nav','contentCls':'ks-switchable-content','effect': 'scrollx','steps':1, 'viewSize': [450], 'circular': false, 
'prevBtnCls': 'mall-prev', 'nextBtnCls': 'mall-next', 'disableBtnCls': 'disable' }">
    <a title="上一页" href="javascript:void(0);" hidefocus="true" class="mall-prev"></a>
    <a title="下一页" href="javascript:void(0);" hidefocus="true" class="mall-next"></a>
    <div id="J_Carousel" class="mall-content clearfix" >
    <ul class="ks-switchable-content">
        <li class="big-piclist" >
            <style>
                
                #J_DirectPromo_129 a {
                    width: 440px;
                }
            </style>
            <span class="J_DirectPromo" id="J_DirectPromo_129">
                <a target="_blank" href="#" style="width: 440px; height: 137px;">
                    <img src="http://img04.taobaocdn.com/tps/i4/T1nd86XeVeXXXXXXXX-440-135.jpg" alt="不涨反降 洗护新品新体验">
                </a>
            </span>
        </li>
        <li class="big-piclist">
            <span class="J_DirectPromo" id="J_DirectPromo_127">
                <a target="_blank" href="#">
                    <img src="http://img01.taobaocdn.com/tps/i1/T1P0R6Xc4kXXXXXXXX-110-135.png" alt="潮潮了事">
                </a>
            </span>
            <a target="_blank" href="#">
                <img src="http://img04.taobaocdn.com/tps/i4/T1.JV6XcXjXXXXXXXX-110-135.png" alt="闪耀指针">
            </a>
            <a target="_blank" href="#">
                <img src="http://img02.taobaocdn.com/tps/i2/T1YcN6XoloXXXXXXXX-110-135.png" alt="浓情午后">
            </a>
            <a target="_blank" class="last" href="#">
                <img src="http://img02.taobaocdn.com/tps/i2/T1jdx6Xd4oXXXXXXXX-110-135.png" alt="五折包邮">
            </a>
            <!--end-->
        </li>
        <li class="big-piclist">
            <span class="J_DirectPromo" id="J_DirectPromo_128">
                <a target="_blank" href="#">
                    <img src="http://img02.taobaocdn.com/tps/i2/T1S006XiVdXXXXXXXX-110-135.png" alt="周年庆祝">
                </a>
            </span>
            <a target="_blank" href="#">
                <img src="http://img02.taobaocdn.com/tps/i2/T1TZ06XkBqXXXXXXXX-110-135.png" alt="3.8折体验">
            </a>
            <a target="_blank" href="#">
                <img src="http://img02.taobaocdn.com/tps/i2/T1yKF6XcVdXXXXXXXX-110-135.png" alt="免单回馈">
            </a>
            <a target="_blank" class="last" href="#">
                <img src="http://img03.taobaocdn.com/tps/i3/T1qx85XotyXXXXXXXX-110-135.png" alt="新鲜搭配">
            </a>
            <!--end-->
        </li>
    </ul>
    <ul class="ks-switchable-nav">
        <li class="ks-active">
            <img src='http://img04.taobaocdn.com/tps/i4/T1nd86XeVeXXXXXXXX-440-135.jpg' />
        </li>
        <li>
            <img src='http://img04.taobaocdn.com/tps/i4/T1C206XdhvXXXXXXXX-130-50.jpg' />
        </li>
        <li>
            <img src='http://img03.taobaocdn.com/tps/i3/T1CL06XdpvXXXXXXXX-120-50.jpg' />
        </li>
    </ul>
    </div>
</div>






















<h3>效果二</h3>
<style>
.scrollable {
    position: relative;
    width: 820px;
    
}

.scrollable .prev, .scrollable .next {
    position: absolute;
    top: 50px;
    color: #666;
    cursor: pointer;
}

.scrollable .prev {
    left: 10px;
}

.scrollable .next {
    right: 10px;
}

.scrollable .disable {
    color: #ddd;
    cursor: default;
}

.scrollable .ks-switchable-nav {
    position: absolute;
    right: 30px;
    top: -10px;
}

.scrollable .ks-switchable-nav li {
    float: left;
    padding: 5px;
    font-size: 18px;
    cursor: pointer;
}

.scrollable .ks-switchable-nav li.ks-active {
    color: #C8282B;
}

.scroller {
    position: relative;
    width: 680px;
    height: 120px;
    border: 1px solid #ccc;
    background-color: #F9F9F9;
    margin: auto;
    overflow: hidden;
}

.scroller .ks-switchable-content img {
    float: left;
    width: 100px;
    height: 75px;
    padding: 2px;
    margin: 20px 15px;
    background-color: #fff;
    border: 1px solid #ccc;
    display: inline !important;
}
</style>
<script>
  jQuery(function($){
  
    

    /* 经典的jQuery形式 */

    $("#demo6").Carousel({
      prevBtnCls:'prev',
      nextBtnCls:'next',
      disableBtnCls:'disable',
      effect: 'scrollx',
      steps: 5,
      viewSize: [680],
      circular: false
      //autoplay:true,//是否自动切换
    });
    
    
    
  });
</script>
<div id="demo6" class="s-demo scrollable">
    <span id="scroller-prev" class="prev">&lsaquo; 上一页</span>
    <span id="scroller-next" class="next">下一页 &rsaquo;</span>
    <div class="scroller">
        <div class="ks-switchable-content">
            <!-- 1-5 -->
            <img alt="" src="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img02.taobaocdn.com/tps/i2/T1.XGaXalnXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img04.taobaocdn.com/tps/i4/T1oEmXXmVoXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img04.taobaocdn.com/tps/i4/T1oEmXXmVoXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img03.taobaocdn.com/tps/i3/T1Hm1XXipvXXXXXXXX-110-135.png"/>
            <!-- 5-10 -->
            <img id='carousel_lazy1' alt=""
                 src="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <!-- 10-15 -->
            <img alt="" src="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
            <img alt="" src="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
        </div>
        <ul class="ks-switchable-nav">
            <li class="ks-active">&bull;</li>
            <li>&bull;</li>
            <li>&bull;</li>
        </ul>
    </div>
</div>






<h3>效果三</h3>
<style>
 .scroll-news {
            height: 20px;
            overflow: hidden;
            margin-top:10px;
       }

        .scroll-news a {
            color: #FF7E00;
            font-size: 15px;
            line-height:20px;
        }
</style>
<div id="demo5" class="J_Widget section scroll-news" data-widget-type="Carousel" data-widget-config="{
      'contentCls' : 'news-items',
      'hasTriggers' : false,
      'effect' : 'scrolly',
      'interval' : 3,
      'duration' : 0.2,
      'easing':'easeInOutElastic'
}">
    <ul class="news-items">
        <li><a target="_blank" href="http://youa.baidu.com/shop/72e01b38fb26b4ebc5db0136">“一分钱”轻松体验有啊网购流程</a></li>
        <li><a target="_blank" href="http://co.youa.baidu.com/content/payhelp/b12/zhaoshang/">开通网银，百付宝为您一路护航</a></li>
        <li><a target="_blank" href="http://co.youa.baidu.com/picture/r/mall/guide/index.html">新手买家？帮助教程带您走通有啊</a></li>
        <li><a target="_blank" href="http://youa.baidu.com/static/help/quality_form_build.html">尽情挥洒你的创意，共建百度有啊</a></li>
        <li><a target="_blank" href="http://co.youa.baidu.com/content/help/A10/2008-09-06/153433185574.html">认准标识，精选实力卖家任您选择</a></li>
        <li><a target="_blank" href="http://co.youa.baidu.com/content/help/A3/2/2008-09-01/143723181295.html#10">收藏</a> + <a target="_blank" href="http://co.youa.baidu.com/content/help/A3/2009-01-08/112820209991.html">购物车</a>，逛街搜店更便捷</li>
    </ul>
</div>





<h3>效果四</h3>
<style>
    #J_Slide {
    position: relative;
    width: 470px;
        height: 150px;
        border: 1px solid #B6D1E6;
        overflow: hidden;
    }

    #J_Slide .ks-switchable-nav {
        position: absolute;
        bottom: 5px;
        right: 5px;
        z-index: 99;
    }

    #J_Slide .ks-switchable-nav li {
        float: left;
        width: 16px;
        height: 16px;
        line-height: 16px;
        margin-left: 3px;
        background-color: #FCF2CF;
        border: 1px solid #F47500;
        color: #D94B01;
        text-align: center;
        cursor: pointer;
        list-style: none;
    }

    #J_Slide .ks-switchable-nav li.ks-active {
        width: 18px;
        height: 18px;
        line-height: 18px;
        margin-top: -1px;
        color: #FFF;
        background-color: #FFB442;
        font-weight: bold;
    }

    #J_Slide .ks-switchable-content {
        margin: 0;
        padding: 0;
    }
    #J_Slide .ks-switchable-content li {
        height: 150px;
        width: 470px;
        overflow: hidden;
        margin: 0;
    }

    #J_Slide .ks-switchable-nav li,
    #J_Slide .ks-switchable-trigger-content {
        position: relative;
    }

    #J_Slide .ks-switchable-trigger-mask {
        position: absolute;
        right: 0;
        width: 18px;
        height: 18px;
        background-color: #FF9415;
        visibility: hidden
    }

    #J_Slide .ks-active .ks-switchable-trigger-mask {
        visibility: visible
    }

    .list li {
        margin-left: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
        list-style-type: circle;
    }

</style>
<div id="J_Slide" class="loading J_Widget" data-widget-type="Slide">
        <ol class="ks-switchable-content">
            <li><a href="#" target="_blank"><img alt="" src="http://img05.taobaocdn.com/tps/i5/T1HllqXjXpXXXXXXXX-470-150.jpg"/></a></li>
            <li class="hidden"><a target="_blank" href="#"><img alt="" width="470" height="150" border="0" src="http://img.alimama.cn/bcrm/adboard/picture/2009-12-24/091224170529.gif"/></a></li>
            <li class="hidden"><a target="_blank" href="#"><img alt="" width="470" height="150" border="0" src="http://img.alimama.cn/bcrm/adboard/picture/2009-12-29/091229160359.jpg"/></a></li>
            <li class="hidden"><a href="#" target="_blank"><img alt="" src="http://img01.taobaocdn.com/tps/i1/T1qS0qXhBhXXXXXXXX-470-150.jpg"/></a></li>
            <li class="hidden">
                <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="470" height="150" class="holiday-logo">
                    <param name="movie" value="http://img04.taobaocdn.com/tps/i4/T1bblrXfBrXXXXXXXX.swf"/>
                    <param name="quality" value="high"/>
                    <param name="swfversion" value="8.0.0"/>
                    <param name="wmode" value="opaque"/>
                    <!--[if !IE]>-->
                    <object type="application/x-shockwave-flash" data="http://img04.taobaocdn.com/tps/i4/T1bblrXfBrXXXXXXXX.swf" width="470" height="150" name="holiday-logo" class="holiday-logo">
                        <param name="wmode" value="opaque"/>
                    </object>
                    <!--<![endif]-->
                </object>
            </li>
        </ol>
    </div>



<h3>效果五</h3>
<style>
            #demo2 {
                position: relative;
                width: 750px;
                padding-top: 29px;
                left:10px;
            }

            #demo2 .ks-switchable-nav {
                position: absolute;
                left: 20px;
                margin-top: -29px;
                z-index: 99;
            }

            #demo2 .ks-switchable-nav li {
                float: left;
                width: 130px;
                height: 27px;
                line-height: 21px;
                text-align: center;
                background: url(http://docs.kissyui.com/docs/html/static/demo/switchable/assets/tabs-sprite.gif) no-repeat 0 6px;
                margin-right: 3px;
                padding-top: 8px;
                cursor: pointer;
            }

            #demo2 .ks-switchable-nav li.ks-active {
                background-position: 0 -40px;
                cursor: default;
            }

            #demo2 .ks-switchable-content {
                position: relative;
                height: 120px;
                padding: 20px;
                border: 1px solid #AEC7E5;
            }
</style>
<div id="demo2" class="s-demo J_Widget" data-widget-type="Tab">
      <ul class="ks-switchable-nav">
          <li title="标题的title">
              <span style="display:none" id="a_tip">标题 A，可左右键切换操作</span>
              <a href="http://www.taobao.com">标题 A</a></li>
          <li><a href="http://www.taobao.com">标题 B</a></li>
          <li>标题 C</li>
          <li>标题 D</li>
          <li>标题 E</li>
      </ul>
      <div class="ks-switchable-content">
          <div style="display: none"><a href="#"> 内容 a</a></div>
          <div style="display: none"><a href="#">内容 B</a></div>
          <div style="display: none"><a href="#">内容 C</a></div>
          <div style="display: none"><a href="#">内容 D</a></div>
          <div style="display: none">
          asd
          </div>
      </div>
</div>


<h3>效果五</h3>
<style>
 .tiny-slide-wrap {
        overflow: hidden;
        width: 274px;
        height: 143px;
    }

    .tiny-slide-wrap .ks-switchable-nav {
        display: none;
    }

    .tiny-slide-wrap .tiny-hd {
        height: 26px; /*width:298px;*/
        background: url('http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif') -143px -203px no-repeat;
        position: relative;
    }

    .tiny-slide-wrap .tiny-hd .sk-title {
        display: block;
        width: 65px;
        height: 27px;
        top: 0;
        left: 0;
        position: absolute;
    }

    .tiny-slide-wrap .tiny-hd .sk-title img {
        width: 100%;
        height: 100%;
    }

    .tiny-slide-wrap .tiny-hd h3 {
        color: #999999;
        font-size: 12px;
        padding-left: 70px;
        padding-top: 8px;
        font-weight: normal;
    }

    .tiny-slide-wrap .tiny-hd .txt-indicator {
        position: absolute;
    }

    .tiny-slide-wrap .tiny-hd .tiny-prev {
        background: url('http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif') -165px -110px no-repeat;
        display: block;
        height: 14px;
        overflow: hidden;
        position: absolute;
        right: 14px;
        top: 10px;
        width: 16px;
    }

    .tiny-slide-wrap .tiny-hd .tiny-prev:hover {
        background-position: -165px -124px;
    }

    .tiny-slide-wrap .tiny-hd .tiny-next {
        background: url('http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif') -180px -110px no-repeat;
        display: block;
        height: 14px;
        overflow: hidden;
        position: absolute;
        right: 0px;
        top: 10px;
        width: 16px;
    }

    .tiny-slide-wrap .tiny-hd .tiny-next:hover {
        background-position: -180px -124px;
    }

    .tiny-slide-wrap .tiny-hd .txt-indicator {
        font-weight: bold;
        position: absolute;
        font-size: 11px;
        color: #666666;
        top: 9px;
        right: 40px;
    }

    .tiny-slide-wrap .tiny-hd .txt-indicator em {
        color: #ff6600;
    }

    .tiny-slide-wrap .tiny-slide-content {
        width: 100%;
        height: 117px;
        overflow: hidden;
    }

    .tiny-slide-wrap .tiny-slide-content .tiny-item {
        position: relative;
        width: 274px;
        float: left;
        padding-top: 10px;
    }

    .tiny-slide-wrap .tiny-slide-content .tiny-pic {
        display: block;
        width: 122px;
        height: 100px;
        position: absolute;
        top: 10px;
        left: 5px;
    }

    .tiny-slide-wrap .tiny-slide-content p {
        padding-left: 147px;
        height: 12px;
        margin-bottom: 9px;
        _margin-bottom: 3px;
    }

    .tiny-slide-wrap .tiny-slide-content .full {
        padding-top: 4px;
    }

    .tiny-slide-wrap .tiny-slide-content .des {
        color: #3e3e3e;
        padding-top: 15px;
    }

    .tiny-slide-wrap .tiny-slide-content .price {
        color: #999999;
    }

    .tiny-slide-wrap .tiny-slide-content .link {
        color: #ff6600;
        font-weight: bold;
    }

    .tiny-slide-wrap .tiny-slide-content .btn {
        display: block;
        width: 78px;
        height: 22px;
        background: url('http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif') -197px -110px no-repeat;
    }

    .tiny-slide-wrap .tiny-slide-content .btn:hover {
        background-position: -275px -110px;
    }
</style>
<script>
jQuery(function($){
  $("#J_TinySlide").Carousel({
      activeIndex: 0,
      effect: 'scrollx',
      viewSize: [274],
      circular: true,
      easing:'easeInOutElastic',
      prevBtnCls: 'tiny-prev',
      nextBtnCls: 'tiny-next',
      interval: 3
  })
});

</script>
<div id="J_TinySlide" class="s-demo tiny-slide-wrap">
        <div class="tiny-hd pr">
            <a class="sk-title" href="http://try.taobao.com/index.htm?id=try2">
                <img src="http://a.tbcdn.cn/p/fp/2011a/assets/space.gif"/>
            </a>
            <h3>(18240件免费商品)</h3>

            <a title="上一页" href="javascript:void(0);" hidefocus="true" class="tiny-prev" id="J_TinyPrev"></a>

            <a title="下一页" href="javascript:void(0);" hidefocus="true" class="tiny-next" id="J_TinyNext"></a>
        </div>
        <div class="tiny-slide-content clearfix" data-active-index="1" style="position: relative;">
            <ol class="ks-switchable-content" style="position: absolute; width: 288px;left:0px; ">

                <li class="tiny-item" style="display: block; float: left;">
                    <a href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.1&SPM=1.55010.103950.1.0.0.0&item_id=593722" class="tiny-pic"><img alt="欧美经典鳄鱼纹包" width="122" height="100" src="http://img03.taobaocdn.com/tps/i3/T14eycXeXXXXXXXXXX-122-100.jpg"></a>
                    <p class="des">欧美经典鳄鱼纹包</p>
                    <p class="price">原价:374</p>

                    <p class="full"><a class="btn" href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.2&SPM=1.55010.103950.2.0.0.0&item_id=593722"></a></p>
                </li>
                <li class="tiny-item" style="display: block; float: left;">
                    <a href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.3&SPM=1.55010.103950.3.0.0.0&item_id=608713" class="tiny-pic"><img alt="新款无叶风扇" width="122" height="100" src="http://img02.taobaocdn.com/tps/i2/T1SeycXepXXXXXXXXX-122-100.jpg"></a>
                    <p class="des">新款无叶风扇</p>
                    <p class="price">原价:498</p>
                    <p class="full"><a class="btn" href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.4&SPM=1.55010.103950.4.0.0.0&item_id=608713"></a></p>
                </li>

                <li class="tiny-item" style="display: block; float: left;">
                    <a href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.5&SPM=1.55010.103950.5.0.0.0&item_id=570730" class="tiny-pic"><img alt="波西米亚抹胸长裙" width="122" height="100" src="http://img04.taobaocdn.com/tps/i4/T17KycXd4XXXXXXXXX-122-100.jpg"></a>
                    <p class="des">波西米亚抹胸长裙</p>
                    <p class="price">原价:97</p>
                    <p class="full"><a class="btn" href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.6&SPM=1.55010.103950.6.0.0.0&item_id=570730"></a></p>
                </li>
                <li class="tiny-item" style="display: block; float: left;">
                    <a href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.7&SPM=1.55010.103950.7.0.0.0&item_id=608721" class="tiny-pic"><img alt="触摸板无线键盘" width="122" height="100" src="http://img01.taobaocdn.com/tps/i1/T1XuCcXd0XXXXXXXXX-122-100.jpg"></a>

                    <p class="des">触摸板无线键盘</p>
                    <p class="price">原价:348</p>
                    <p class="full"><a class="btn" href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.8&SPM=1.55010.103950.8.0.0.0&item_id=608721"></a></p>
                </li>
                <li class="tiny-item" style="display: block; float: left;">
                    <a href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.9&SPM=1.55010.103950.9.0.0.0&item_id=546704" class="tiny-pic"><img alt="奕而乐笔记本冰座" width="122" height="100" src="http://img01.taobaocdn.com/tps/i1/T1RKycXepXXXXXXXXX-122-100.jpg"></a>
                    <p class="des">奕而乐笔记本冰座</p>

                    <p class="price">原价:59</p>
                    <p class="full"><a class="btn" href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.10&SPM=1.55010.103950.10.0.0.0&item_id=546704"></a></p>
                </li>

            </ol>
        </div>
        <ul class="ks-switchable-nav">
            <li class="ks-active">1</li>
        </ul>
    </div>
</div>





<div class="api">








<h4> <span class="mw-headline"> 参数配置列表</span></h4>
<table border="1" cellspacing="0">
<tbody><tr>
<td> <b>配置参数</b>
</td><td> <b>参数可选值</b>
</td><td> <b>作用说明</b>
</td></tr>
<tr>
<td> effect
</td><td> none/fade/scrolly/scrollx<br>
<p>(默认值：none)<br>
</p>
</td><td> 切换时的动画效果<br>
<p>none, 最朴素的显示/隐藏效果<br>
fade, 可实现淡隐淡现的效果<br>
scrolly, 垂直滚动<br>
scrollx, 水平滚动<br>
</p>
</td></tr>
<tr>
<td> easing
</td><td> (默认值：linear)
</td><td> 滚动的动画方方式<br />
引入
<a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">jquery.easing.js</a>
拓展可以增加更多滚动效果
</td></tr>
<tr>
<td> countdown
</td><td> true/false  (默认值：false)
</td><td> 是否开启倒计时样式
</td></tr>
<tr>
<td> countdownFromStyle
</td><td> 自定义值
</td><td> 设定倒计时最终样式<br>
<p>如: width:15px 表示进度条最终宽度,可先在CSS里对样式进行定义<br>
</p>
</td></tr>
<tr>
<td> navCls
</td><td> 自定义值
</td><td> 对其进行轮播的目标列表的class值
</td></tr>
<tr>
<td> contentCls
</td><td> 自定义值
</td><td> 轮播列表所对应的内容列表的class值
</td></tr>
<tr>
<td> delay
</td><td> 自定义数值  (默认值：1)
</td><td> 延迟加载时间，当前显示图片到切换其他图片动作开始，这中间的停留时间<br>
<p>.1 == 100ms
</p>
</td></tr>
<tr>
<td> triggerType
</td><td> mouse/click&lt;&gt;
<p>(默认值：mouse)br<br>
</p>
</td><td> 触发方式——
<p>mouse：鼠标经过触发<br>
click：鼠标点击触发<br>
</p>
</td></tr>
<tr>
<td> hasTriggers
</td><td> true/false  (默认值：true)
</td><td> 是否设置触发点
</td></tr>
<tr>
<td> steps
</td><td> 自定义数值 (默认值：1)
</td><td> 切换视图内有多少个panels
</td></tr>
<tr>
<td> viewSize
</td><td> 自定义值
</td><td> 切换视图区域的大小。<br>
<p>一般不需要设定此值，仅当获取值不正确时，用于手工指定大小<br>
</p>
</td></tr>
<tr>
<td> activeIndex
</td><td> 自定义数值  (默认值：0)
</td><td> 默认激活的列表项
</td></tr>
<tr>
<td> activeTriggerCls
</td><td> 自定义值 (默认值：active)
</td><td> 默认激活列表项的class值
</td></tr>
<tr>
<td> circular
</td><td> true/false(默认：true)
</td><td> 滚动效果
</td></tr>
<tr>
<td> prevBtnCls
</td><td> 自定义值
</td><td> 上一页的class值
</td></tr>
<tr>
<td> nextBtnCls
</td><td> 自定义值
</td><td> 下一页的class值
</td></tr>
<tr>
<td> disableBtnCls
</td><td> 自定义值
</td><td> 按钮不可用的class值
</td></tr>
<tr>
<td> duration
</td><td> 自定义值(默认：0.5)
</td><td> 动画时长,一张图片开始切换到另一张图片显示的时间
<p>.1 == 100ms
</p>
</td></tr>
<tr>
<td> interval
</td><td> 自定义值(默认：5)
</td><td> 播放间隔时间
</td></tr>

</tbody></table>

</div>


</body>
</html>